<template>
	<view style="height: auto;">
		<view class="model-border" style="display: flex;align-items: center;">
			<view class="title"></view>
			<text class="icon-title">工作记录</text>
		</view>
		<view class="container">
			<view class="item" style="font-size:13px;line-height:36px;">				
				<view v-for="item in listData" style="border-bottom:1px solid #f7f7f7;">
					<label>
						{{item.create_at}}{{dictValue.opttype[item.type]}}了一条{{item.info}}
						(<label style="color:#333">#{{item.no}}</label>)
					</label>
				</view>
			</view>
			
			<view class="item">
				
				<view v-show="nomore" style="width: 100%;text-align: center;color:#666;margin-top:10px;margin-bottom:20rpx;font-size:12px;">
					<label>没有更多了</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '../../../common/common.js'
	export default {
		data() {
			return {
				dictValue: common.dictValue,			
				listData:[],
				pageNum:1,
				pageNumber:[],
				nomore: false,
			}
		},
		onShow() {
			this.nomore = false;
			this.pageNum = 1;
			this.listData = []
			this.getList()
		},
		onReachBottom() {
			console.log("到底了");
			if(!this.nomore){
				this.pageNum = this.pageNum + 1
				this.getList()				
			}	
		},
		methods: {
			getList() {
				var that = this;
				uni.showLoading({"title":"数据加载中..."});
				var cookie =  uni.getStorageSync('cookie');
				uni.request({
					url: this.$common.baseUrl +'api/data/getWorkRecord',
					header: {'content-type': 'application/x-www-form-urlencoded','cookie':cookie},
					data: {
						pageNum:this.pageNum,
						keyword:this.serchParmas
					},
					method: 'GET',
					success: res=>{
						uni.hideLoading();
						if(res.data.info == 200){
							this.pageNumber = res.data.data.data
							this.listData = this.listData.concat(res.data.data.data)
							if(this.pageNumber.length<res.data.data.pageSize){
								that.nomore = true;
							}else{
								that.nomore = false;
							}
						}
					},
					fail: err=>{
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5
	}
</style>
<style scoped>
	.title {
		height: 40rpx;
		width: 10rpx;
		background-color: #68B92E;
		margin: 20rpx 0 20rpx 20rpx;
	}

	.icon-title {
		display: block;
		line-height: 100rpx;
		padding-left: 10rpx;
		font-weight: bold;
	}

	.content {
		width: 95%;
		height: 80rpx;
		margin: 0 auto;
		background-color: #F7F7F7;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.content_remack {
		width: 95%;
		height: 280rpx;
		margin: 0 auto;
		background-color: #F7F7F7;
		border-radius: 15rpx;
		margin-bottom: 10rpx;
	}

	.content_text {
		font-size: 26rpx;
		letter-spacing: 2rpx;
		margin-left: 30rpx;
		width: 200rpx;
		
	}
	.content_text_remack{
		font-size: 26rpx;
		letter-spacing: 2rpx;
		margin-left: 30rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.content_area{
		width: 95%;
		margin: 0 auto;
		height: 200rpx;
	}
	.right {
		width: 50rpx;
	}

	.right image {
		width: 30rpx;
		height: 30rpx;
	}

	>>>.u-input {
		border: none !important;
	}

	.content-input {
		flex: 1 !important;
	}

	.open_invoice {
		width: 400rpx;
		height: 90rpx;
		background-color: #68B92E;
		text-align: center;
		border-radius: 15rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.open_invoice text {
		font-size: 25rpx;
		font-family: Source Han Serif CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 20rpx;
		display: block;
	}
	.charts {
			width: 100%;
			height: 460upx;
			background-color: #ffffff;
		}
			
		/* 分区背景颜色与圆角设置 */
		view.container{
			width: 710upx; /* 750 - 20*2 - 20*2 */
			margin-bottom: 20upx;
			background-color: #FFFFFF;
			border-radius: 4px;
			padding: 20upx 20upx 20upx 20upx;
			margin:0 auto;
			height: auto;
			/* padding-bottom: 20upx; */
			/* padding-left: 15upx; */
			/* padding-right: 15upx; */
		}
		
		/* 刘昊部分使用 工点监测页和传感器监测页*/
		.container-plus{
				width: (750-64-40)upx; 
				margin:0px 20upx 20upx 20upx; 
				background-color: #FFFFFF;
				border-radius: 4px;
				padding: 38upx 32upx 40upx 32upx;
			}
		
		.analyze-button-box{
			width: 100%;
			height: 48px;
			display: flex;
			flex-direction: row;
		}
		.analyze-button-text{
			width: 0px;
			height: 48px;
			flex: 1;
			font-size: 16px;
			text-align: center;
			font-family: Helvetica;
			line-height: 48px;
			width: 112upx;
		}
		.left-r{
			border-top-left-radius: 4px;
		}
		.right-r{
			border-top-right-radius: 4px;
		}
		.selected{
			background-color: #FFFFFF !important;
			color: #4E67FD !important;
		}
		.not-selected{
			color: #7F7F7F;
			background-color: #F9F9F9;
		}
		
		.table-sd{
				color:#666;
				text-align:center;border:1px solid #f7f7f7;font-size:28upx;margin:0 auto;width:100%;
			}
			.table-sd .row{
				border-bottom:1px solid #f7f7f7;display:flex;flex-direction:row;line-height:30px;
			}
			.table-sd .row-last{
				display:flex;flex-direction:row;line-height:30px;
			}
			.table-sd .row .td, .table-sd .row-last .td{
				border-right:1px solid #f7f7f7;flex:1;
			}
			.table-sd .row .td-last, .table-sd .row-last .td-last{
				flex:1;
			}
</style>
